<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#app {
				margin-top: 100px;
				display: flex;
				justify-content: center;
			}

			.masking_out {
				width: 100%;
				height: 100%;
				position: absolute;
				display: none;
				background: hsla(0, 0%, 100%, .8);
			}

			.hint {
				width: 200px;
				height: 100px;
				padding-top: 10px;
				background-color: white;
				z-index: 999;
				text-align: center;
				display: none;
			}

			.hint-text {
				margin-bottom: 20px;
			}

			.text {
				height: 28px;
			}

			.confirm {
				margin-left: 10px;
				margin-right: 10px;
				width: 60px;
				height: 30px;
				background-color: deeppink;
				border: 0ch;
			}

			.cancle {
				width: 60px;
				height: 30px;
				background-color: aquamarine;
				border: 0ch;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<counter v-model:count="count"></counter>
			<div class="masking_out"></div>
			<input type="text" name="" id="" class="text" v-model="count">
			<button class="confirm" @click="">确定</button>
			<button class="cancle">取消</button>
		</div>
	</body>
</html>
<script>
	const counter = {
		props: ["count"],
		methods: {

		},
		template: `
			<div class="hint">
				<p class="hint-text">{{count}}你确定修改吗?</p>
				<div class="btn">
					<button class="confirm">确定</button>
					<button class="cancle">取消</button>
				</div>
			</div>
		`
	}
	const app = Vue.createApp({
		components: {
			counter
		},
		data() {
			return {

			}
		}
	})
	const vm = app.mount("#app")
</script>